<template>
	<div class="personal-center">
		<div class="main_content">
			<div class="main_content_title">
				<div class="left">个人设置</div>
			</div>
			<div class="main_content_con">
				<div class="userInfoBox">
					<div class="userBox" v-if="$store.getters.staffCode !== 'PINGTAI'">
						<div class="left">
							<el-image :src="BASE_IMG + $store.getters.avatar" fit="cover" class="user-avatar"
								style="width:104px;height:104px;border-radius: 50%;">
								<div slot="error" class="image-slot">
									<svg-icon icon-class="avatar" style="font-size: 104px;" />
								</div>
							</el-image>
							<div class="name">{{ userInfo.name }}</div>
						</div>
						<div class="right">
							<h1> {{ userInfo.companyName }}</h1>
							<div><span>姓名</span> <span>{{ userInfo.name }}</span></div>
							<div><span>电话</span> <span>{{ userInfo.phone }}</span></div>
							<div><span v-if="userInfo.hierarchyName">部门</span> <span>{{ userInfo.hierarchyName }}</span></div>
							<div style="display: flex;" v-if="userInfo.positionName">
								<span style="flex: none;">职位</span>
								<div style="margin-left: 16px;">
									<span>{{ userInfo.positionName }}</span>
								</div>
							</div>
						</div>
					</div>
					<div class="item">
						<div class="title">头像</div>
						<div class="info">
							<!-- <el-avatar shape="circle" :size="42" fit="cover" :src="BASE_IMG + $store.getters.avatar"></el-avatar> -->
							<el-image :src="BASE_IMG + $store.getters.avatar" class="user-avatar" fit="cover"
								style="width:42px;height:42px;border-radius: 50%;">
								<div slot="error" class="image-slot">
									<svg-icon icon-class="avatar" style="font-size: 42px;" />
								</div>
							</el-image>
							<el-button round size="mini" @click="imgClick()">编辑头像</el-button>
							<input style="float: left; display: none" type="file" id="uploadFile" accept="image/*"
								@change="handleChange()" />
						</div>
					</div>
					<div class="item">
						<div class="title">用户名</div>
						<div class="info">
							<span>{{ userInfo.phone }}</span>
						</div>
					</div>
					<div class="item">
						<div class="title">密码</div>
						<div class="info">
							<span>******</span>
							<el-button round size="mini" @click="getPassword">修改密码</el-button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<el-dialog title="修改密码" width="40%" :visible.sync="passwordDialogVisible" append-to-body custom-class="add_dialog">
			<el-form ref="info" :model="info" :rules="rules" label-width="auto" class="demo-ruleForm">
				<el-form-item label="用户名">
					<el-input disabled :value="info.userName" type="text" />
				</el-form-item>
				<el-form-item label="原密码" prop="oldPwd">
					<el-input type="text" v-model="info.oldPwd" autocomplete="off" maxlength="8" show-word-limit
						placeholder="请输入" />
				</el-form-item>
				<el-form-item label="新密码" prop="newPwd">
					<el-input type="text" v-model="info.newPwd" autocomplete="off" maxlength="8" show-word-limit
						placeholder="请输入" />
				</el-form-item>
				<el-form-item label="确认密码" prop="confirmPwd">
					<el-input type="text" v-model="info.confirmPwd" autocomplete="off" maxlength="8" show-word-limit
						placeholder="请输入" />
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="passwordDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addSubmitForm" :disabled="disabled">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import {
	getAuthUpdatePwd,
	getUpdateHeadImg,
	getUserInfo
} from '@/api/personal-center'
import { uploadImage } from '@/api/upload'
import UploadImgSimple from '@/components/Upload/UploadImgSimple'
import defaultSettings from '@/settings'
export default {
	components: {
		UploadImg: UploadImgSimple
	},
	name: 'PersonalCenter',
	data() {
		return {
			passwordDialogVisible: false,
			rules: {
				oldPwd: [
					{
						min: 6,
						max: 8,
						required: true,
						message: '请输入原密码(6到8位)',
						trigger: 'blur'
					},
					{
						required: true,
						pattern: /^[\a-z0-9\%&!@#^*=?$\x22]+$/,
						message: '请输入正确的规则(字母、数字或者特殊符号(%&!@#^*=?$))',
						trigger: 'blur'
					}
				],
				newPwd: [
					{
						min: 6,
						max: 8,
						required: true,
						message: '请输入新密码(6到8位)',
						trigger: 'blur'
					},
					{
						required: true,
						pattern: /^[\a-z0-9\%&!@#^*=?$\x22]+$/,
						message: '请输入正确的规则(字母、数字或者特殊符号(%&!@#^*=?$))',
						trigger: 'blur'
					}
				],
				confirmPwd: [
					{
						min: 6,
						max: 8,
						required: true,
						message: '请输入确认一次((6到8位))',
						trigger: 'blur'
					},
					{
						required: true,
						pattern: /^[\a-z0-9\%&!@#^*=?$\x22]+$/,
						message: '请输入正确的规则(字母、数字或者特殊符号(%&!@#^*=?$))',
						trigger: 'blur'
					}
				]
			},
			// 账号信息
			info: {
				userName: '', //用户名
				oldPwd: '', //原密码
				newPwd: '', //新密码
				confirmPwd: '' //确认密码
			},
			// 用户信息
			userInfo: {},
			BASE_IMG: defaultSettings.BASE_IMG,
			disabled: false
		}
	},
	mounted() {
		window._vm = this
		this.getUserInfoData()
	},
	methods: {
		getUserInfoData() {
			getUserInfo().then(res => {
				if (res.code === 200) {
					this.userInfo = res.data
				}
			})
		},
		imgClick() {
			document.getElementById('uploadFile').click()
		},
		beforeUpload(file) {
			const _this = this
			// 进行图片类型和大小的限制
			var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
			const extension = testmsg === 'png'
			const extension2 = testmsg === 'jpg'
			const extension3 = testmsg === 'jpeg'
			const extension4 = testmsg === 'gif'
			if (!extension && !extension2 && !extension3 && !extension4) {
				_this.$message({
					message: '图片只能是 png、jpg、jpeg、gif格式!',
					type: 'warning'
				})
				return false //必须加上return false; 才能阻止
			}
			const isLt5M = file.size / 1024 / 1024 < 5
			if (!isLt5M) {
				_this.$message({
					message: '图片大小不能超过5M!请重新选择!',
					type: 'warning'
				})
				return false // 必须加上return false; 才能阻止
			}

			return (extension || extension2 || extension3 || extension4) && isLt5M
		},
		handleChange() {
			const loading = this.$loading({
				lock: true,
				text: '上传中,请稍后',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.5)'
			})
			var _this = this
			let file = event.target.files[0],
				flag = true
			if (
				Object.prototype.toString.call(this.beforeUpload) ===
				'[object Function]'
			) {
				flag = this.beforeUpload(file)
			}
			if (flag) {
				this.loading = true
				uploadImage({
					file
				})
					.then(res => {
						if (res.data.code === 200) {
							this.updateImg(res.data)
							loading.close()
						}
					})
					.catch(() => {
						loading.close()
						this.showUploadError()
					})
					.finally(() => {
						this.loading = false
					})
			} else {
				this.loading = false
			}
		},

		updateImg(res) {
			if (res.code === 200) {
				// 跟新图片
				getUpdateHeadImg(res.data)
					.then(res => {
						if (res.code === 200) {
							this.$message({
								message: '头像修改成功!',
								type: 'success'
							})
							this.$store.dispatch('user/getInfo')
						}
					})
					.catch(() => {
						this.$store.dispatch('user/getInfo')
					})
				this.userInfo.headImg = res.data
			}
		},
		showUploadError() {
			this.$message({
				message: '图片上传失败!',
				type: 'error'
			})
			this.userInfo.headerImg = ''
		},
		getPassword() {
			this.resetForm()
			this.info = {
				userName: this.$store.getters.staffPhone, //用户名
				oldPwd: '', //原密码
				newPwd: '', //新密码
				confirmPwd: '' //确认密码
			}
			this.disabled = false
			this.passwordDialogVisible = true
		},
		resetForm() {
			if (this.$refs['info'] !== undefined) {
				this.$nextTick(() => {
					this.$refs['info'].resetFields()
				})
			}
		},
		addSubmitForm() {
			this.$refs['info'].validate(valid => {
				if (valid) {
					if (this.info.newPwd !== this.info.confirmPwd) {
						this.$message({
							showClose: true,
							message: '新输入密码不一致',
							type: 'warning'
						})
						return false
					}
					this.disabled = true
					getAuthUpdatePwd({
						oldPwd: this.info.oldPwd, //原密码
						newPwd: this.info.newPwd, //新密码
						confirmPwd: this.info.confirmPwd //确认密码
					})
						.then(res => {
							if (res.code === 200) {
								this.$message({
									showClose: true,
									message: '修改成功,请重新登录',
									type: 'success',
									duration: 1300
								})
								setTimeout(() => {
									this.logout()
								}, 1500)
							}
						})
						.catch(err => {
							this.disabled = false
						})
				} else {
					this.disabled = false
					return false
				}
			})
		},

		// 推出登录
		async logout() {
			await this.$store.dispatch('user/logout')
			this.$router.push(`/login}`)
		}
	}
}
</script>
<style lang="scss">
.personal-center {
	height: 100%;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;

	&>.main_content {
		width: 99.9%;
		height: 100%;
		overflow: hidden;

		&>.main_content_title {
			margin-bottom: 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		&>.main_content_con {
			height: calc(100% - 40px);
			width: 100%;
			border: 1px solid #dfe6ec;
			overflow: auto;

			&>.userInfoBox {
				margin: 50px auto;
				width: 580px;
				height: auto;

				&>.userBox {
					width: 100%;
					padding: 24px 32px;
					height: auto;
					background: #f8f8f8;
					border-radius: 8px;
					overflow: hidden;
					display: flex;
					justify-content: space-between;

					&>.left {
						width: 104px;
						height: 100%;
						text-align: center;

						&>.name {
							line-height: 35px;
							margin-top: 8px;
							font-size: 16px;
						}
					}

					&>.right {
						margin-left: 30px;
						flex: 1;
						height: 100%;

						&>h1 {
							font-size: 18px;
						}

						&>div {
							line-height: 30px;
							font-size: 14px;

							&>span:first-child {
								color: #808080;
							}

							&>span:last-child {
								margin-left: 16px;
								color: #333333;
							}
						}
					}
				}

				&>.item {
					margin-top: 20px;
					width: 100%;
					height: 90px;
					border-bottom: 1px solid #ebeef5;
					box-sizing: border-box;

					&>.title {
						line-height: 40px;
						color: #000000;
						font-size: 14px;
					}

					&>.info {
						display: flex;
						justify-content: space-between;
						height: 42px;
						align-items: center;
					}
				}
			}
		}
	}
}
</style>
<style lang="scss" scoped>
::v-deep .add_dialog {
	// height: calc(100% - 30vh) !important;
	position: relative;

	.el-dialog__header {
		border-bottom: 1px solid #e4e4e4;
		text-align: left;
	}

	.el-dialog__body {
		// height: calc(100% - 125px);
		overflow: auto;
	}

	.el-dialog__footer {
		border-top: 1px solid #e4e4e4;
		text-align: right;
	}

	.avatar-uploader {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		width: 68px;
		height: 68px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 68px;
		height: 68px;
		line-height: 68px;
		text-align: center;
	}

	.avatar {
		width: 68px;
		height: 68px;
		display: block;
	}

	.el-avatar {
		img {
			width: 100%;
			height: 100%;
		}
	}

	.el-button:hover,
	.el-button:focus {
		color: #000;
	}
}
</style>
